
@mixin make-grid-colums($columns:$grid-columns,$gutter:$grid-gutter-width,$breakpoints:$grid-breakpoints){
   %grid-column{
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
   }
   // % 占位符选择器，优点：不会将预定义的css规则编译输出
   @each $breakpoint in map-keys($breakpoints){
       $infix:breakpoint-infix($breakpoint,$breakpoints);

       @for $i  from 1 through $columns{
         .col#{$infix}-#{$i}{
               @extend %grid-column;
            //    @extend 指令用于继承预先定义好的占位符选择器%或css样式选择器
         }
       }
       .col#{$infix},
       .col#{$infix}-auto {
           @extend %grid-column;
       }
       @include media-breakpoint-up($breakpoint, $breakpoints){
          .col#{$infix}{
              flex-basis: 0;
              flex-grow: 1;
              max-width: 100%;
          }
          .col#{$infix}-auto {
              flex: 0 0 auto;
              width:auto;
              max-width: 100%;
          }
          @for $i from 1 through $columns {
              .col#{$infix}-#{$i}{
                  @include make-col($i,$columns);
              }
          }
          .order#{$infix}-first {
              order: -1;
          }
          .order#{$infix}-last {
              order: $columns + 1
          }
          @for $i from 0 through $columns{
              .order#{$infix}-#{$i} {order: $i; }
          }
          @for $i from 0 through ($columns - 1){
            @if not ($infix == "" and  $i == 0 ) {
               .offset#{$infix}-#{$i} {
                   @include make-col-offset($i, $columns);
               }
            }
          }
       }
   }
}
